<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>无标题文档</title>
	<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link href="node_modules/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" type="text/css">
	<script type="importmap">
        {
            "imports": {
			  "toggle_aside_nav":"./dist/lib/toggle_aside_nav.js",
			  "toggle_aside_logo":"./dist/lib/toggle_aside_logo.js",
              "main": "./dist/main.js"
            }
        }
    </script>
</head>

<body>
	<div class="container-fluid" id="app">
		<div class="row bg-primary bg-gradient text-white" id="app_header">
			<div class="col px-0" id="app_header_logo">
				<i class="bi bi-bookmark-fill"></i>
				<span class="px-1">A Demo Admin</span>
			</div>
			<div class="col ps-1">
				<div class="input-group input-group-sm">
					<input type="text" class="form-control border-warning" placeholder=""
						aria-label="Recipient's username" aria-describedby="button-addon2">
					<button class="btn btn-outline-warning " type="button" id="button-addon2">搜索</button>

				</div>
			</div>
			<div class="col" id="app_header_nav">

				<button type="button" class="btn btn-sm btn-warning">Primary</button>

				<!-- Example single danger button -->
				<div class="btn-group">
					<button type="button" class="btn btn-sm btn-warning dropdown-toggle" data-bs-toggle="dropdown"
						aria-expanded="false">
						<i class="bi bi-emoji-smile"></i>欢迎,yuenzzy~!
					</button>
					<ul class="dropdown-menu">
						<li><a class="dropdown-item" href="#">Action</a></li>
						<li><a class="dropdown-item" href="#">Another action</a></li>
						<li><a class="dropdown-item" href="#">Something else here</a></li>
						<li>
							<hr class="dropdown-divider">
						</li>
						<li><a class="dropdown-item" href="#">Separated link</a></li>
					</ul>
				</div>



			</div>
		</div>
		<div class="row pt-0" id="app_body">
			<div id="app_body_slide__fixed" class="border-end border-light-subtle bg-primary">

				<div class="row h-100">
					<div class="col p-0 bg-primary text-light" id="app_body_slide_logo">
						<ul>
							<li data-nav="user1"> <i class="bi bi-people-fill"></i> <span>首页</span> </li>
							<li data-nav="user2" class="active"> <i class="bi bi-people-fill"></i> <span>用户</span> </li>
							<li data-nav="user3"> <i class="bi bi-people-fill"></i> <span>用户</span> </li>
							<!-- <li data-nav="user4"> <i class="bi bi-people-fill"></i> <span>用户</span> </li>
							<li data-nav="user5"> <i class="bi bi-people-fill"></i> <span>用户</span> </li>
							<li data-nav="user6"> <i class="bi bi-people-fill"></i> <span>用户</span> </li>
							<li data-nav="user7"> <i class="bi bi-people-fill"></i> <span>用户</span> </li>
							<li data-nav="user8"> <i class="bi bi-people-fill"></i> <span>用户</span> </li>
							<li data-nav="user9"> <i class="bi bi-people-fill"></i> <span>用户</span> </li>
							<li data-nav="user10"> <i class="bi bi-people-fill"></i> <span>用户</span> </li> -->

						</ul>
					</div>
					<div class="col bg-light rounded-start" id="app_body_slide_nav">
						<ul class="nav flex-column" data-nav="user1">
							<li class="nav-item"> <a class="nav-link" aria-current="page" href="#">所有用户</a>
							</li>
							<li class="nav-item"> <a class="nav-link" href="#">添加新用户</a> </li>
							<li class="nav-item active"> <a class="nav-link" href="#">授权</a> </li>
							<li class="nav-item"> <a class="nav-link" href="#">权限管理</a> </li>
						</ul>
						<ul class="nav flex-column active" data-nav="user2">
							<li class="nav-item"> <a class="nav-link" aria-current="page" href="#">所有用户2</a>
							</li>
							<li class="nav-item"> <a class="nav-link" href="#">添加新用户</a> </li>
							<li class="nav-item active"> <a class="nav-link" href="#">授权</a> </li>
							<li class="nav-item"> <a class="nav-link" href="#">权限管理</a> </li>
						</ul>
						<ul class="nav flex-column" data-nav="user3">
							<li class="nav-item"> <a class="nav-link" aria-current="page" href="#">所有用户3</a>
							</li>
							<li class="nav-item"> <a class="nav-link" href="#">添加新用户</a> </li>
							<li class="nav-item active"> <a class="nav-link" href="#">授权</a> </li>
							<li class="nav-item"> <a class="nav-link" href="#">权限管理</a> </li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col" id="app_body_slide">
				<!--
      <div class="row">
        <div class="col p-1" id="app_body_slide_logo">
          <ul>
            <li> <i class="bi bi-people-fill"></i> <span>用户</span> </li>
            <li class="active"> <i class="bi bi-people-fill"></i> <span>用户</span> </li>
          </ul>
        </div>
        <div class="col" id="app_body_slide_nav">
          <ul class="nav flex-column">
            <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
            <li class="nav-item"> <a class="nav-link disabled">Disabled</a> </li>
          </ul>
        </div>
      </div>
-->
			</div>
			<div class="col" id="app_body_main">
				<div class="row border-bottom border-light-subtle" id="app_body_main_nav">
					<div class="col" id="app_slide_toggle"><a><i class="bi bi-text-indent-right"></i></a></div>
					<div class="col">
						<nav aria-label="breadcrumb">
							<ol class="breadcrumb mb-0">
								<li class="breadcrumb-item"><a href="#">首页</a></li>
								<li class="breadcrumb-item"><a href="#">用户</a></li>
								<li class="breadcrumb-item active" aria-current="page">授权</li>
							</ol>
						</nav>
					</div>
				</div>
				<div class="row" id="app_body_main_title">
					<div class="col-12">
						This is a lead paragraph. It stands out from regular paragraphs.
					</div>
					<div class="col-12">此处显示表单</div>
				</div>
				<div class="row" id="app_body_main_body">
					<div class="col">
						<div class="row">
							<div class="col">此处显示 class "row" 的内容1111</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>

						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
						<div class="row">
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
							<div class="col">此处显示 class "row" 的内容</div>
						</div>
					</div>
					<div class="col-12" id="app_body_main_body_footer">
						<nav aria-label="Page navigation example">
							<ul class="pagination">
								<li class="page-item"><a class="page-link" href="#">Previous</a></li>
								<li class="page-item"><a class="page-link" href="#">1</a></li>
								<li class="page-item"><a class="page-link" href="#">2</a></li>
								<li class="page-item"><a class="page-link" href="#">3</a></li>
								<li class="page-item"><a class="page-link" href="#">Next</a></li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
	<script type="module">
		// import "main";
		import toggle from "toggle_aside_nav";
		import aside_bind from "toggle_aside_logo";
		toggle("#app_slide_toggle");
		aside_bind();
	</script>
</body>

</html>